<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>天气案例</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
<div id="root">
	<h2>今天天气很{{info}}</h2>
	<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
	<!-- <button @click="isHot = !isHot">切换天气</button> -->
	<button @click="changeWeather">切换天气</button>
</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。


	const vm = new Vue({
		el: '#root',
		data: {
			isHot: true,
		},
		methods: {  // 执行函数
			changeWeather() {
				this.isHot = !this.isHot;  // 取反
			}
		},
		computed: {
			// 计算属性：通过return把返回的计算结果赋值给方法名，通过{{}}插值把计算结果展示到界面中
			info() {
				return this.isHot ? '炎热' : '寒冷'
			}
		},

	})

	/* const vm = new Vue({
		el: '#root',
		data: {
			isHot: true,
		},
		computed: {
			info() {
				return this.isHot ? '炎热' : '凉爽'
			}
		},
		methods: {
			changeWeather() {
				this.isHot = !this.isHot
			}
		},
	})*/
</script>

</html>